<template>
  <label @click="handleClick" class="pt-radio" :class="{checked: value === label}">
    <span class="btn">
      <span v-show="value === label" class="icon"></span>
    </span>
    <span v-if="$slots.default" class="text">
      <slot></slot>
    </span>
  </label>
</template>

<script>
export default {
  name: "ptRadio",
  props: {
    value: String,
    label: String
  },
  methods: {
    handleClick () {
      this.$emit("input", this.label);
    }
  }
};
</script>

<style lang="less" scoped>
// 单选框
.pt-radio {
  display: inline-block;
  cursor: pointer;
  .btn {
    float: left;
    border-radius: 50%;
    position: relative;
    width: 14px;
    height: 14px;
    position: relative;
    border: 1px solid #aa3422;
    .icon {
      position: absolute;
      left: 5px;
      top: 5px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #fff;
    }
  }
  .text {
    font-size: 14px;
    padding-left: 18px;
    display: block;
    color: @fColor1;
  }
  &.checked {
    .btn {
      border: none;
      background-color: @primary;
    }
  }
}
</style>